<template>
  <div class="hotel-order">
    <v-header ref="header" title="填写订单"></v-header>
    <div class="main" ref="main">
      <div class="hotel-wrapper">
        <div class="hotel-info">
          <div class="thumb" v-lazy:backgroundImage="selectedScenic.scenic.thumbUrl"></div>
          <div class="wrapper">
            <p class="name">{{selectedScenic.scenic.name + '*' + selectedScenic.ticket.productName}}</p>
            <p class="price">门票价格: <span>￥</span><span class="num">{{selectedScenic.ticket.sellPrice}}</span></p>
          </div>
        </div>
      </div>

      <ul class="user-info">
        <li>
          <label>游玩日期</label>
          <datetime v-model="playDate"></datetime>
        </li>
        <li>
          <label>门票张数</label>
          <inline-x-number v-model="ticketNumber" width="50px" button-style="round" :min="1" :max="99"></inline-x-number>
        </li>
        <li>
          <label>联系人姓名</label>
          <x-input v-model="username" placeholder="请输入联系人姓名" required text-align="right" :show-clear="false"></x-input>
        </li>
        <li>
          <label>联系人身份证号</label>
          <x-input v-model="cardNumber" placeholder="请输入联系人身份证号" required text-align="right" :show-clear="false"></x-input>
        </li>
        <li>
          <label>联系人手机号</label>
          <x-input v-model="phoneNumber" type="tel" placeholder="请输入联系人手机号" is-type="china-mobile" required text-align="right" :show-clear="false"></x-input>
        </li>
      </ul>

      <div class="order-notice">
        <p class="order-title">预定说明</p>
        <ul class="order-desc">
          <li>
            <label>预定时间：</label>
            <div>
              <p class="important" style="margin-bottom: 4px;">{{selectedScenic.ticket.orderTimeStr}}</p>
              <p>{{selectedScenic.ticket.orderTimeTip}}</p>
            </div>
          </li>
          <li>
            <label>有 效 期：</label>
            <p>{{selectedScenic.ticket.limitUseTimeRangeStr}}</p>
          </li>
          <li>
            <label>限购政策：</label>
            <p  style="padding-top: 0.5px">每笔订单最多购买99份</p>
          </li>
        </ul>
        <div v-if="selectedScenic.ticket.feeDescription && selectedScenic.ticket.feeDescription !== ''" style="margin-bottom: 32px">
          <p class="order-title">费用说明</p>
          <p class="desc">{{selectedScenic.ticket.feeDescription}}</p>
        </div>
        <p class="order-title">退款说明</p>
        <ul class="order-desc">
          <li>
            <label>退款时间：</label>
            <div>
              <p class="important" style="margin-bottom: 4px;">{{selectedScenic.ticket.refundTypeStr}}</p>
              <p>{{selectedScenic.ticket.refundTypeTip}}</p>
            </div>
          </li>
          <li >
            <label>是否支持部分退款：</label>
            <p>{{selectedScenic.ticket.supportPartRefund === 1 ? '是' : '否'}}</p>
          </li>
          <li >
            <label>退款手续费：</label>
            <p>{{selectedScenic.ticket.refundPoundageStr}}</p>
          </li>
        </ul>
        <p class="order-title">入园须知</p>
        <ul class="intro">
          <li>
            <p style="margin-bottom: 8px"><label>入园方式：</label><span class="important">在景区门闸机刷二维码即可进</span></p>
          </li>
          <li>
            <p style="margin-bottom: 8px"><label>景区开放时间</label></p>
            <p>{{selectedScenic.scenic.openTime}}</p>
          </li>
        </ul>
        <div v-if="selectedScenic.ticket.useDescription && selectedScenic.ticket.useDescription !== ''" style="margin-bottom: 32px">
          <p class="order-title">使用说明</p>
          <p class="desc">{{selectedScenic.ticket.useDescription}}</p>
        </div>
      </div>
    </div>
    <div class="bottom" :style="{paddingBottom: paddingBottom + 'px'}">
      <p class="left">
        <span class="type">总价格</span>
        ￥<span class="price">{{totalPrice}}</span>
      </p>
      <p class="right" @click="submitOrder">提交订单</p>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { TransferDom, Popup, InlineXNumber, XInput, Actionsheet, Datetime } from 'vux'

import axios from '@/api/axiosApi'
import { localUser } from '@/assets/js/local'
import { mapGetters } from 'vuex'
import { isIphoneX } from '@/assets/js/brower'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'HotelOrder',
  mixins: [handleBackMixin],
  data() {
    return {
      showSelectEnterTime: false,
      playDate: this.moment().format('YYYY-MM-DD'),
      ticketNumber: 1,
      username: localUser.get('realName') || localUser.get('nickname') || '',
      phoneNumber: localUser.get('phoneNum') || '',
      cardNumber: '',
      allPopupModels: ['showSelectEnterTime']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Popup,
    InlineXNumber,
    XInput,
    Actionsheet,
    Datetime
  },
  computed: {
    totalPrice() {
      return parseFloat(this.selectedScenic.ticket.sellPrice * this.ticketNumber, 2)
    },
    ...mapGetters(['selectedScenic'])
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
  },
  mounted() {
    this.$refs.main.style.height = window.innerHeight - this.$refs.header.$el.offsetHeight - 44 - this.paddingBottom + 'px'
  },
  methods: {
    submitOrder() {
      if (localUser.get('id') == null) {
        this.$vux.toast.text('请先登录', 'middle')
        return
      }
      if (this.username === '') {
        this.$vux.toast.text('请填写联系人姓名', 'middle')
        return
      }
      if (this.phoneNumber === '') {
        this.$vux.toast.text('请填写联系人手机号', 'middle')
        return
      }
      if (this.cardNumber === '') {
        this.$vux.toast.text('请填写联系人身份证号', 'middle')
        return
      }
      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.cardNumber)) {
        this.$vux.toast.text('身份证号有误', 'middle')
        return
      }
      const _self = this
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '请仔细阅读预定规则，并确认订单的相关信息。',
        onConfirm () {
          axios.post(_self, '/v1/ScenicOrder', {
            userId: localUser.get('id'),
            certificateNo: _self.cardNumber,
            linkName: _self.username,
            linkMobile: _self.phoneNumber,
            scenicId: _self.selectedScenic.scenic.id,
            productId: _self.selectedScenic.ticket.id,
            quantity: _self.ticketNumber,
            occDate: _self.playDate,
            goodsName: _self.selectedScenic.scenic.name + '*' + _self.selectedScenic.ticket.productName
          }, (data) => {
            _self.$vux.toast.text('提交订单成功', 'middle')
            _self.$router.push(`/scenicOrderDetail/${data}`)
          }, () => {
            _self.$vux.toast.text('提交订单失败', 'middle')
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.hotel-order
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.main
  overflow-x hidden
  overflow-y auto
  -webkit-overflow-scrolling touch
  -webkit-box-sizing border-box
.hotel-wrapper
  background #ffffff
  box-shadow 0 0 10px #e0e0e0
  .hotel-info
    display flex
    padding 16px
    padding-left 0
    margin-left 16px
    border-bottom 1px solid #e2e2e2
    .thumb
      width 80px
      height 60px
      border-radius 3px
      background-size cover
      background-repeat no-repeat
      background-position center
      margin-right 8px
    .wrapper
      width calc(100% - 78px)
    .name
      height 44px
      font-size 17px
      color #333
      font-weight bold
      line-height 1.3
      no-wrap-n(2)
    .price
      font-size 13px
      color #999
      line-height 1
      span
        color $color-theme
      .num
        font-size 18px
.hotel-params
  display flex
  justify-content space-between
  align-items center
  height 48px
  line-height 48px
  padding 0 16px
  i
    font-size 18px
    color #999999
    margin-left 4px
    margin-right 16px
  .date-select
    display flex
    align-items center
    .date
      font-size 18px
      color #333333
    .date-str
      font-size 13px
      color #999999
      margin-left 8px
    .divider
      font-size 18px
      margin 0 8px
.user-info
  margin-top 20px
  background #ffffff
  padding 0 16px
  font-size 15px
  li
    display flex
    padding 12px 0
    justify-content space-between
    border-bottom 0.5px solid #e2e2e2
    &:last-child
      border-bottom none
    label
      color #666
    .right
      color #333
      font-size 15px
      i
        color #666
        margin-left 4px
    .tip
      color #999
.bottom
  height 44px
  line-height 44px
  display flex
  border-top 1px solid #e2e2e2
  box-shadow 0 0 10px #e0e0e0
  background #fff
  .left
    width 55%
    text-align center
    font-size 13px
    background #fff
    color $color-theme
    .type
      margin-right 8px
      color $color-level
    .price
      font-size 17px
  .right
    width 45%
    background $color-theme
    color #fff
    font-size 17px
    text-align center
.order-notice
  padding 20px 16px
  margin-top 20px
  font-size 13px
  color #999
  label
    color #000
    margin-right 4px
  .important
    background $color-theme
    padding 0 8px
    width fit-content
    color #fff
    font-size 13px
    height 20px
    line-height 20px
    border-radius 2px
    display inline-block
  .order-title
    font-size 16px
    line-height 1.1
    color #333
    margin-bottom 16px
    margin-top 8px
    position relative
    &:before
      content '*'
      color red
      display inline-block
      margin-right 6px
  .order-desc
    margin-bottom 32px
    li
      display flex
      margin-bottom 12px
      line-height 1.3
  .intro
    margin-bottom 32px
    li
      margin-bottom 12px
      line-height 1.3
</style>

<style>
.hotel-order .user-info .vux-x-input .weui-input {
  font-size: 15px;
}
.hotel-order .user-info .vux-number-input{
  font-size: 16px;
}
.hotel-order .user-info .weui-cell {
  padding: 0;
}
.hotel-order .user-info .weui-cell:before {
  display: none;
}
.hotel-order .user-info .vux-x-input::before {
  display: none;
}
.hotel-order .user-info .weui-cell__ft {
  color: #333;
  font-size: 15px;
}
</style>

